<template>
	<view :style="{background:pageData.bgColor,padding:`0 ${pageData.margin*2}rpx`}" v-if="pageData">
		<view class="hidden" :style="{borderRadius:`${pageData.foreRadius*2}rpx`}">
			<u-notice-bar :text="txtArr[0]" :color="color" :bgColor="pageData.foreColor" :duration="3000" @click="handleClick(0)" v-if="infoData.length == 1"></u-notice-bar>
			<u-notice-bar :text="txtArr" :direction="pageData.direction || 'column'" :step="pageData.direction == 'row'" :color="color"
				:bgColor="pageData.foreColor" :duration="3000" @click="handleClick" v-if="infoData.length > 1"></u-notice-bar>
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex';
	export default {
		name: 'notice',
		props: {
			pageData:{
				type:Object,
				default:{}
			}
		},
		data() {
			return {
				infoData:[],
				txtArr: []
			}
		},
		mounted() {
			this.getBlockInfo();
		},
		methods: {
			async getBlockInfo(){
				const pageData = this.pageData;
				const result = await this.$getBlockInfo(pageData.list);
				if(!result.list.length || !result.list[0].list.length) return;
				this.infoData = result.list[0].list || [];
				this.txtArr = this.infoData.map(item=>item.website_article_title)
			},
			handleClick(index){
				if(!this.pageData.click) return
				this.$pop.artDetails(this.infoData[index])
			}
			
		},
		computed:{
			...mapState(['color'])
		}
	}
</script>

<style lang="scss" scoped>
</style>
